﻿<!DOCTYPE html>
<html>
 <head> 
  <meta charset="UTF-8" /> 
  <title>Table</title> 
  <link rel="stylesheet" href="../webjars/plugins/layui/css/layui.css" media="all" /> 
  <link rel="stylesheet" href="../webjars/css/global.css" media="all" /> 
  <style type="text/css">
     .applist{}
     .applist li{
        float:left;width:24%;
     }
  </style>
 </head> 
 <body> 
  <div class="admin-main" dataLoad="../admin/config/{id}" onFinishCallback="onFinishCallback"> 
   <form class="layui-form" action="../admin/config/update">  
     <input type="hidden" bindAttr="id" name="id">
     <div class="layui-form-item"> 
     <label class="layui-form-label">全局配置</label> 
     <div class="layui-input-block"> 
       <input type="checkbox" bindAttr="global" value="true" lay-skin="switch"  disabled="disabled"/> 
     </div> 
    </div>  
    <div class="layui-form-item"> 
     <label class="layui-form-label">环境</label> 
     <div class="layui-input-block"> 
      <input type="text" bindAttr="env" class="layui-input" style="width:200px;" disabled/> 
     </div> 
    </div> 
    <div class="layui-form-item" id="div_app_list"> 
     <label class="layui-form-label">绑定应用</label> 
     <div class="layui-input-block"> 
      <ul id="applist" class="applist"></ul>
        <script type="text/html" id="applist_tpl">
	     {{# layui.each(d, function(index, item){ }}
          <li><input type="checkbox" name="appIds" lay-skin="primary" title="{{ item.text }}" value="{{ item.value }}"></li>
	     {{# }); }}
       </script>
     </div> 
    </div> 
    <div class="layui-form-item"> 
     <label class="layui-form-label">版本</label> 
     <div class="layui-input-block"> 
       <input type="text" bindAttr="version" class="layui-input" style="width:200px;" disabled/> 
     </div> 
    </div> 
    <div class="layui-form-item"> 
     <label class="layui-form-label">配置类型</label> 
     <div class="layui-input-block"> 
      <input type="radio" bindAttr="type" name="type" value="1" title="配置文件" disabled/> 
      <input type="radio" bindAttr="type" name="type" value="2" title="配置项" disabled/> 
      <input type="radio" bindAttr="type" name="type" value="3" title="JSON" disabled/> 
     </div> 
    </div> 
    <div class="layui-form-item">
    <div class="layui-inline">
      <label class="layui-form-label">配置名</label>
      <div class="layui-input-inline" style="width: 200px;">
        <input type="text" bindAttr="name" name="name" id="fileName" lay-verify="required" placeholder="请输入配置名或者直接上传" autocomplete="off" class="layui-input" style="width:200px;" /> 
      </div>
      <div class="layui-input-inline" style="width: 200px;">
        <button type="button" class="layui-btn layui-btn-normal" id="upload_file"><i class="layui-icon">&#xe67c;</i>上传配置文件</button>
      </div>
    </div>
    </div>     
    <div class="layui-form-item layui-form-text"> 
     <label class="layui-form-label">配置内容</label> 
     <div class="layui-input-inline" style="width: 750px;">
        <textarea id="fileContent" bindAttr="contents" name="contents" placeholder="请输入内容" class="layui-textarea"></textarea> 
      </div>
      <div class="layui-input-inline" style="width: 100px;">
        <input type="button" id="content_pop_btn" class="layui-btn layui-btn-warm layui-btn-min" value="全屏显示"/>
      </div>
    </div> 
    <div class="layui-form-item"> 
     <div class="layui-input-block"> 
        <input type="button"  class="layui-btn layui-btn-normal J_ajaxSubmit" onSuccessCallback="onSubmitSuccess" value="保存" />
        <input type="reset" class="layui-btn layui-btn-primary" value="重置"/>
     </div> 
    </div> 
   </form> 
  </div> 
  <script type="text/javascript" src="../webjars/plugins/layui/layui.js"></script> 
  <script type="text/javascript" src="../webjars/js/jeesuitelayui.js"></script>  
  <script type="text/javascript">
  layui.use(['layer','upload'], function(){
  	var $ = layui.jquery , layer = layui.layer ,upload = layui.upload;
	var uploadInst = upload.render({
	    elem: '#upload_file' //绑定元素
	    ,url: '/admin/config/upload' //上传接口
	    ,accept: 'file'
	    ,done: function(res){
	    	if(res.code == 200){
    			$('#fileContent').val(res.data.content);
    			$('#fileName').val(res.data.fileName);
    		}else{
    			layui.layer.msg(res.msg, {icon: 5});
    		}
	    }
	    ,error: function(){
	      //请求异常回调
	    }
	  });
  	
  	//
  	$('#content_pop_btn').on('click',function(){
  		parent.parent.layer.open({
  	    type: 1 
  	    ,area: ['1024px', '660px']
  	    ,title: '编辑配置内容'
  	    ,shade: 0.6 //遮罩透明度
  	    ,maxmin: true //允许全屏最小化
  	    ,anim: 1 //0-6的动画形式，-1不开启
  	    ,content: '<div style="padding:5px;"><textarea id="pop_fileContent" style="width:1000px;height:550px;border:1px dashed #000;">'+$('#fileContent').val()+'</textarea> </div>'
  	    ,btn: ['确认']
  	    ,yes: function(index, layero){
  	    	var content = $('#pop_fileContent', window.parent.parent.document).val();
  	    	$('#fileContent').val(content);
  	    	parent.parent.layer.close(index);
  	    }
  	  }); 
    });
  	
  });
  
  function onFinishCallback(data){
	  var $ = layui.jquery;
	  if(data.global==1){
		  layui.jquery("#div_app_list").remove();
	  }else{
		  var $cont = $('#applist');
		  var appIds = data.appIds.split(',');
		  $.getJSON('../admin/app/options?grantType=RW&env='+data.env,function(res){
			  var tpl = $('#applist_tpl').html();
			  layui.laytpl(tpl).render(res, function(html){
				  $cont.html(html);
			  });
			  
			  $cont.find(':checkbox').each(function(){
				  var $this = $(this);
				  for(var i in appIds){
					  if(appIds[i] === $this.attr('value')){
						  $this.attr('checked',true);
					  }
				  }
			  });
		     layui.form.render();
		  });
	  }
  }
  
  function onSubmitSuccess(data){
	  parent.layui.layer.closeAll('iframe');
  } 
  </script>
 </body>
</html>